<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, maxmum-scale=1.0, minmum-scale=1.0">
    <link rel="stylesheet" href="../../css/goodsSort.css">
    <link rel="stylesheet" href="../../css/normalize.css">
    <link rel="stylesheet" href="../../css//common.css">
    <script src="../../js/jquery.min.js"></script>

    <title>商品分类</title>
</head>

<body>
    <div class="box">
        <!-- 1、头部搜索框-start-->
        <header>
            <div class="back-btn">
                <img data-lazy-src="../../images/gs1.png" alt="">
            </div>
            <div class="header-search">
                <input class="s-in" type="search" name="" id="" placeholder="洗发露套装">
                <!-- <button class="s-btn">搜索</button> -->
            </div>
        </header>
        <!-- 1、头部搜索框-end -->

        <!-- 2、左侧导航栏 -->
        <nav>
            <a href="javascript: ;" style="background-color:white;color: red;">
                热门推荐
            </a>
            <a href="javascript: ;">
                手机数码
            </a>
            <a href="javascript: ;">
                电脑办公
            </a>
            <a href="javascript: ;">
                家用电器
            </a>
            <a href="javascript: ;">
                计生情趣
            </a>
            <a href="javascript: ;">
                美妆护肤
            </a>
            <a href="javascript: ;">
                个护清洁
            </a>
            <a href="javascript: ;">
                汽车生活
            </a>
            <a href="javascript: ;">
                京东超市
            </a>
            <a href="javascript: ;">
                男装
            </a>
            <a href="javascript: ;">
                男鞋
            </a>
            <a href="javascript: ;">
                女装
            </a>
            <a href="javascript: ;">
                女鞋
            </a>
            <a href="javascript: ;">
                母婴童装
            </a>
            <a href="javascript: ;">
                图书音像
            </a>
            <a href="javascript: ;">
                运动户外
            </a>
            <a href="javascript: ;">
                内衣配饰
            </a>
            <a href="javascript: ;">
                食品生鲜
            </a>
            <a href="javascript: ;">
                酒水饮料
            </a>
            <a href="javascript: ;">
                家居家装
            </a>
            <a href="javascript: ;">
                家居厨具
            </a>
            <a href="javascript: ;">
                箱包手袋
            </a>
            <a href="javascript: ;">
                钟表珠宝
            </a>
            <a href="javascript: ;">
                玩具乐器
            </a>
            <a href="javascript: ;">
                奢侈品
            </a>
            <a href="javascript: ;">
                京东国际
            </a>
            <a href="javascript: ;">
                艺术邮币
            </a>
            <a href="javascript: ;">
                二手商品
            </a>
            <a href="javascript: ;">
                特产馆
            </a>
            <a href="javascript: ;">
                京东金融
            </a>
            <a href="javascript: ;">
                国际品牌
            </a>
            <a href="javascript: ;">
                拍卖
            </a>
        </nav>
        <!-- js -->
        <script>
            const h =  window.screen.availHeight
            $('nav').css('height',h + 'px')
        </script>
        <!-- 2、左侧导航栏 -->

        <!-- 3、主体内容区域 -->
        <div class="main-contain">
            <div class="main-header">
                <span class="header-title">热门分类</span>
                <a href="javascript:;">
                    <i>
                        <img data-lazy-src="../../images/gr1.png" alt="">
                    </i>
                    <div>排行榜</div>
                    <i><img data-lazy-src="../../images/gr2.png" alt=""></i>
                </a>
            </div>
            <ul>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs3.jpg" alt="">
                    </div>
                    <span>空调</span>
                </li>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs4.png" alt="">
                    </div>
                    <span>笔记本</span>
                </li>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs5.png" alt="">
                    </div>
                    <span>游戏手机</span>
                </li>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs6.jpg" alt="">
                    </div>
                    <span>全面屏手机</span>
                </li>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs7.jpg" alt="">
                    </div>
                    <span>智能手机</span>
                </li>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs8.jpg" alt="">
                    </div>
                    <span>维生素</span>
                </li>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs9.jpg" alt="">
                    </div>
                    <span>口罩</span>
                </li>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs10.jpg" alt="">
                    </div>
                    <span>加湿器</span>
                </li>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs11.jpg" alt="">
                    </div>
                    <span>电磁炉</span>
                </li>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs12.jpg" alt="">
                    </div>
                    <span>热水器</span>
                </li>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs13.jpg" alt="">
                    </div>
                    <span>数据线</span>
                </li>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs14.jpg" alt="">
                    </div>
                    <span>书籍</span>
                </li>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs15.jpg" alt="">
                    </div>
                    <span>药品</span>
                </li>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs16.jpg" alt="">
                    </div>
                    <span>洗衣液</span>
                </li>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs17.jpg" alt="">
                    </div>
                    <span>薯片</span>
                </li>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs18.jpg" alt="">
                    </div>
                    <span>零食</span>
                </li>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs19.jpg" alt="">
                    </div>
                    <span>吹风机</span>
                </li>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs20.jpg" alt="">
                    </div>
                    <span>仪器</span>
                </li>
                <li>
                    <div class="main-img">
                        <img data-lazy-src="../../upload/gs21.jpg" alt="">
                    </div>
                    <span>智能家居</span>
                </li>

            </ul>
        </div>
        <!-- js -->
        <!-- 3、主体内容区域 -->
        <!-- 4、底部用户操作区 -->
        <footer>
            <!-- 底部用户区域-start -->
            <div class="user_edit">
                <a href="../../index.html">
                    <img data-lazy-src="../../images/us1.png" alt="">
                </a>
                <a href="">
                    <img data-lazy-src="../../images/us22.png" alt="">
                </a>
                <a href="">
                    <img data-lazy-src="../../images/us3.png" alt="">
                </a>
                <a href="">
                    <img data-lazy-src="../../images/us4.png" alt="">
                </a>
                <a href="">
                    <img data-lazy-src="../../images/us5.png" alt="">
                </a>
            </div>
            <!-- 底部用户区域-end -->
        </footer>
        <!-- 4、底部用户操作区 -->

    </div>

    <!-- 插件 -->
    <script src="../../js/EasyLazyload.min.js"></script>
    <script>
        lazyLoadInit({
            showTime:500,
            onLoadBackEnd:function(i,e){
                console.log("onLoadBackEnd:"+i);
            }
            ,onLoadBackStart:function(i,e){
                console.log("onLoadBackStart:"+i);
            }
        });

    </script>
</body>

</html>